import React, { FC, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
import classNames from 'classnames';

type ButtonSize = 'lg' | 'sm';

type ButtonType = 'primary' | 'default' | 'danger' | 'link';

interface IBaseButtonProps {
  className?: string;
  disabled?: boolean; 
  /**设置按钮大小, 可选值： */
  size?: ButtonSize;
  /**设置按钮类型, 可选值： */
  btnType?: ButtonType;
  children: ReactNode;
  href?: string; // 超链接按钮 href
}

// & 交差类型
type NativeButtonProps = IBaseButtonProps & ButtonHTMLAttributes<HTMLElement>; 
// AnchorHTMLAttributes 是 a 标签的默认属性
type AnchorButtonProps = IBaseButtonProps & AnchorHTMLAttributes<HTMLElement>; 

// Partial 设置所有属性为可选
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

/**
 * 页面通用按钮组件，可根据不同的配置显示不同的样式
 * 
 * ### 引入方式 
 * 
 * ```js 
 * import { Button } from 'rqx-ui';
 * ```
 */
export const Button: FC<ButtonProps> = (props) => {
  const {
    btnType,
    disabled,
    size,
    children,
    href,
    className,
    ...rest
  } = props;

  // btn, btn-lg, btn-primary
  const classes = classNames('btn', className, {
    [`btn-${btnType}`]: btnType,
    [`btn-${size}`]: size,
    'disabled': (btnType === 'link') && disabled,
  });

  if(btnType === 'link' && href){
    return (
      <a
        className={classes}
        href={href}
        {...rest}
      >
        {children}
      </a>
    )
  } else {
    return (
      <button
        className={classes}
        disabled={disabled}
        {...rest}
      >
        {children}
      </button>
    )
  }
};

// 增加默认属性
Button.defaultProps = {
  disabled: false,
  btnType: 'default',
};

export default Button;